/*
* @Author: Rosen
* @Date:   2018-02-02 21:57:52
* @Last Modified by:   Rosen
* @Last Modified time: 2018-02-02 22:11:37
*/

import React                from 'react';
import MUtil                from 'util/mm.jsx'
import Product              from 'service/product-service.jsx'
import PageTitle            from 'component/page-title/index.jsx';
import CategorySelector     from './category-selector.jsx';

import './save.scss';

const _mm           = new MUtil();
const _product      = new Product();
//商品详情页面
class ProductDetail extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            id                  : this.props.match.params.pid,
            name                : '',
            subtitle            : '',
            categoryId          : 0,
            parentCategoryId    : 0,
            videoImage          : '',
            coverImage          : '',
            imageheight          : 0,
            imageHost           : '',
            price               : '',
            stock               : '',
            detail              : '',
            status              : 1 //商品状态1为在售
        }
    }
    componentDidMount(){
        this.loadProduct();
    }
    // 加载商品详情
    loadProduct(){
        // 有id的时候，表示是编辑功能，需要表单回填
        if(this.state.id){
            _product.getProduct(this.state.id).then((res) => {
            /* 如果有多个图片请打开这个   let images = res.subImages.split(',');
                res.subImages = images.map((imgUri) => {
                    return {
                        uri: imgUri,的方式地方
                        url: res.imageHost + imgUri
                    }
                });*/
                this.setState(res);
            
  
            }, (errMsg) => {
                _mm.errorTips(errMsg);
            });
        }
    }
    render(){
        return (
            <div id="page-wrapper">
                <PageTitle title="商品详情" />
                <div className="form-horizontal">
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品名称</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.name}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品描述</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.subtitle}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">所属分类</label>
                        <CategorySelector 
                            readOnly
                            categoryId={this.state.categoryId}
                            parentCategoryId={this.state.parentCategoryId}/>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品价格</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control" 
                                    value={this.state.price} readOnly/>
                                <span className="input-group-addon">元</span>
                            </div>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品库存</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control"
                                    value={this.state.stock} readOnly/>
                                <span className="input-group-addon">件</span>
                            </div>
                            
                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">图片高度</label>
                        <div className="col-md-3">
                        
                            <input type="text" className="form-control" 
                                placeholder="请输入图片高度（目前只能填500,600两种值）" 
                                name="imageheight"
                                value={this.state.imageheight}
                                    />

                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品封面图片</label>
                        <div className="col-md-10">
                            {
                               /* 如果有多个图片请打开这个。this.state.coverImage.length ? this.state.subImages.map(
                                    (image, index) => (
                                    <div className="img-con" key={index}>
                                   
                                        <img className="img" src={image.url} />
                                    </div>)
                                ) : (<div>暂无图片</div>)*/

                           this.state.coverImage? (
                                      /*  调用同级目录样式save.scss 限制图片宽高 image.url包含了名称的全路径 */
                                    <div className="img-con" >
                                        <img className="img" src={this.state.imageHost +this.state.coverImage} />
                                    </div>
                                ) 
                                : (<div>暂无封面图片！</div>)


                            }
                        </div>
                    </div>

                         <div className="form-group">
                        <label className="col-md-2 control-label">视频首帧</label>
                        <div className="col-md-10">
                            {
                               /* 如果有多个图片请打开这个。this.state.coverImage.length ? this.state.subImages.map(
                                    (image, index) => (
                                    <div className="img-con" key={index}>
                                   
                                        <img className="img" src={image.url} />
                                    </div>)
                                ) : (<div>暂无图片</div>)*/

                           this.state.videoImage? (
                                      /*  调用同级目录样式save.scss 限制图片宽高 image.url包含了名称的全路径 */
                                    <div className="img-con" >
                                        <img className="img" src={this.state.imageHost +this.state.videoImage} />
                                    </div>
                                ) 
                                : (<div>暂无视频！</div>)


                            }
                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品详情</label>
                        <div className="col-md-10" dangerouslySetInnerHTML={{__html: this.state.detail}}></div>
                    </div>
                </div>
            </div>
        )
    }
}
export default ProductDetail;